<!-- 用户-个人资料界面 -->
<template>
	<div class="MyContainer">
		<div class="common-layout">
      <el-container>
        <!-- 上边布局 -->
        <el-header height="200px">
          <!-- 上传头像 -->
            <div class="info">
				      <div class="info-image" @click="showDialog">
						    <el-avatar :size="100" :src="myObj.avatar" />
						    <span class="info-edit">
								  <i class="el-icon-lx-camerafill"></i>
							  </span>
					    </div>
              <div class="info-name">{{ name }}</div>
				    </div>
                
            <!-- 裁剪 上传 -->
		        <el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
            <div class="block">
              <div class="flex justify-center items-center">
                <div class="bg-purple-300 w-[300px] h-[300px] flex justify-center items-center">
                  <img v-bind:src="imgSrc" />
                </div> 
              </div>

              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="http://47.113.217.179:8080/upload"
                multiple
                name = "img"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="onSuccess"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
              <div class="footBox">
                <el-button type="primary">选择图片并上传</el-button>
                <el-tag class="mt-[7px]">
                  jpg/png files with a size less than 500KB.
                </el-tag>
              </div>
              </el-upload>
            </div>
		      </el-dialog>
        </el-header>
        <!-- 下边布局 -->
        <el-main>
          <el-descriptions title="个人信息" direction="vertical" :column="2" border>            
                    <el-descriptions-item label="姓名">
                        <el-input v-model="myObj.cusName" placeholder="请输入内容" />
                    </el-descriptions-item>
            
                    <el-descriptions-item label="性别">
                        <el-select v-model="myObj.cusGender" class="m-2" placeholder="请选择性别">
                        <el-option v-for="item in options" :key="item.value_sex" :label="item.label" :value="myObj.cusGender"/></el-select>
                    </el-descriptions-item>
    
                    <el-descriptions-item label="年龄">
                        <el-input v-model="myObj.cusOld" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="联系电话">
                        <el-input v-model="myObj.cusPhonenum" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="身份证号">
                        <el-input v-model="myObj.cusIdentity" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="家庭地址">
                        <el-input v-model="myObj.cusAddress" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="身高">
                        <el-input v-model="myObj.hiHeight" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="体重">
                        <el-input v-model="myObj.hiWeight" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="高压">
                        <el-input v-model="myObj.hiPressure" placeholder="请输入内容" />
                    </el-descriptions-item>
    
                    <el-descriptions-item label="低压">
                        <el-input v-model="myObj.hiLowPressure" placeholder="请输入内容" />
                    </el-descriptions-item>
            
                    <el-descriptions-item label="脉搏">
                        <el-input v-model="myObj.hiPulse" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="呼吸频率">
                        <el-input v-model="myObj.hiAge" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="血糖">
                        <el-input v-model="myObj.hiGlucose" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="血脂">
                        <el-input v-model="myObj.hiLipids" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="血氧">
                        <el-input v-model="myObj.hiSao2" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="骨密度">
                        <el-input v-model="myObj.hiBonedensity" placeholder="请输入内容" />
                    </el-descriptions-item>

                    <el-descriptions-item label="备注">
                        <el-input v-model="myObj.hiEvaluate" :rows="2" type="textarea" placeholder="请输入内容"/>
                    </el-descriptions-item>

          </el-descriptions>
          <div>
            <el-divider border-style="dashed" />
          </div>
          <el-row class="mb-4" justify="center">
            <el-button type="primary" size="large" @click="saveInfo">保存信息</el-button>
          </el-row>
        </el-main> 
      </el-container>
    </div>
	</div>
</template>

<script setup lang="ts" name="people">
import { ref , reactive } from 'vue';
import { ElMessage , ElMessageBox} from 'element-plus'
import { getUserInfo,saveUserInfo } from '../../api/manager';
import { useGlobleStore } from '../../store/globle';
import store from '../../store/store';
import type { UploadProps, UploadUserFile } from 'element-plus'

const globle = useGlobleStore()
const options = [{value_sex: '男',label: '男',},{value_sex: '女',label: '女',},]
const name = globle.getUsrname();//登录名
const fileList = ref<UploadUserFile[]>([])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
//个人信息
const myObj = reactive({
  cusName: '',//姓名
  cusGender:'',// 选择性别
  cusOld: 0,//年龄
  cusPhonenum: '',//电话号码
  cusIdentity :'',//身份证号
  cusAddress:'',//家庭住址
  hiHeight:'', //身高
  hiWeight:'', //体重
  hiPressure:'', //高压
  hiLowPressure:'', //低压
  hiPulse:'', //脉搏
  hiAge:'', //呼吸频率
  hiGlucose:'',//血糖
  hiLipids:'', //血脂
  hiSao2:'', //血氧
  hiBonedensity:'', //骨密度
  hiEvaluate:'',//备注
  id:'',
  avatar:'',
  hiId:''
})
//BEGIN 头像
const imgSrc = ref('');
const dialogVisible = ref(false);

const showDialog = () => {
	dialogVisible.value = true;
	imgSrc.value = myObj.avatar
};

const onSuccess = (res) => {
  if(res.code===200){
    ElMessage({
      type:'success',
      message:'上传成功'
    })
    imgSrc.value = res.data
    myObj.avatar = res.data
    //回传信息
    saveInfo()
    //保存图片
    globle.setAvater(myObj.avatar)
    store.dispatch('asyncupdateIOTTagConfig',myObj.avatar)
  }
}
//END 头像

//获取医生信息
getUserInfo().then(res =>{
  if(res.code == 200){//获取成功
    //console.log("获取成功",res)
    var response = res.data;//获取data数据
    myObj.id = response.customer.cusId
    myObj.avatar = response.customer.avatar
    myObj.cusName=response.customer.cusName//姓名
    myObj.cusGender=response.customer.cusGender// 选择性别
    myObj.cusOld=response.customer.cusOld//年龄
    myObj.cusPhonenum=response.customer.cusPhonenum//电话号码
    myObj.cusIdentity =response.customer.cusIdentity//身份证号
    myObj.cusAddress=response.customer.cusAddress//家庭住址
    myObj.hiHeight=response.healthinfo.hiHeight //身高
    myObj.hiWeight=response.healthinfo.hiWeight //体重
    myObj.hiPressure=response.healthinfo.hiPressure //高压
    myObj.hiLowPressure=response.healthinfo.hiLowPressure//低压
    myObj.hiPulse=response.healthinfo.hiPulse //脉搏
    myObj.hiAge=response.healthinfo.hiAge//呼吸频率
    myObj.hiGlucose=response.healthinfo.hiGlucose//血糖
    myObj.hiLipids=response.healthinfo.hiLipids //血脂
    myObj.hiSao2=response.healthinfo.hiSao2 //血氧
    myObj.hiBonedensity=response.healthinfo.hiBonedensity //骨密度
    myObj.hiEvaluate=response.hiEvaluate//备注
    myObj.hiId = response.customer.hiId
  }
})
.catch(err=>{
  console.log("获取失败",err)
})

const saveInfo = () =>{
  //console.log("回传信息：",JSON.stringify(myObj))
  //保存信息
  var info = {
    "cusAddress": myObj.cusAddress,
    "cusId": myObj.id,
    "cusIdentity": myObj.cusIdentity,
    "cusName": myObj.cusName,
    "cusOld": myObj.cusOld,
    "cusPhonenum":myObj.cusPhonenum,
    "hiId": myObj.hiId,
    "avatar": myObj.avatar
  }
  saveUserInfo(info).then(res=>{
    if(res.code === 200){
      ElMessage({
        type:'success',
        message:'保存成功'
      })
    }
  }).catch(err=>{
    ElMessage.error("保存失败")
  })
}
</script>


<style scoped>
.upload-demo{
  width: -webkit-fill-available;
  display: grid;
}
.footBox{
  display: flex;
  margin-top:30px;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  width:100%;
}
.info {
	text-align: center;
	padding: 35px 0;
}
.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-edit i {
	color: #eee;
	font-size: 25px;
}
.info-image:hover .info-edit {
	opacity: 1;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #060606;
}
.crop-demo-btn {
	position: relative;
}
.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

</style>
